<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <style>
        body {
            padding-top: 80px
        }
        
        #search-btn {
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-3 col-md-offset-3">
                <form class="form-horizontal">
                    <input id="place-input" type="text" class="form-control" value="趵突泉" placeholder="请输入地址">
                    <button type="button" id="search-btn" class="btn btn-success">
                        查询
                    </button>
                </form>

            </div>
            <div class="col-md-6">
                <div id="main" style="height:500px;"></div>
            </div>
        </div>
    </div>
</body>
<script src='./js/jquery.min.js'></script>
<script src='./js/echarts.min.js '></script>
<script src='./js/china.js '></script>
<script>
    // 百度地图的开发者秘钥
    var token = 'fHrNQj6DHTjZtfTvfqbsuvTzKc5V9SBl'
    var url = 'http://api.map.baidu.com/geocoder/v2/?output=json&ak=' + token + '&address='
    var ePlaceInput = $('#place-input')
    var eSearchBtn = $('#search-btn')
    var myChart = echarts.init(document.getElementById('main'))
    var chartData = []
    eSearchBtn.click(function() {
        var place = ePlaceInput.val()
        let flag = false
        if (chartData.length === 0) {
            flag = true
        } else {
            chartData.forEach(c => flag = c.name === place ? false : true)
        }
        if (flag) {
            // callback=? 在jquery中会自动生成一个函数数据返回的时候会自己调用，这是jsonp可以实现跨域的原理
            $.getJSON(url + place + '&callback=?', function(res) {
                var loc
                if (res.status === 0) {
                    loc = res.result.location
                    chartData.push({
                        name: place,
                        value: [loc.lng, loc.lat]
                    })
                    drawMap(place)
                } else {
                    alert('百度没有找到地址信息')
                }
            })
        }
        console.log(chartData);
    })


    function drawMap(name) {
        var option = {
            backgroundColor: '#404a59',
            tooltip: {
                trigger: 'item'
            },
            title: {
                text: '2021要去的地方',
                left: 'center',
                textStyle: {
                    color: '#fff'
                }
            },
            toolbox: {
                show: true,
                feature: {
                    saveAsImage: {
                        show: true
                    }
                }
            },
            geo: {
                type: 'map',
                map: 'china',
                roam: true,
                label: {
                    emphasis: {
                        show: false
                    }
                },
                itemStyle: {
                    normal: {
                        areaColor: '#323c48',
                        borderColor: '#111'
                    },
                    emphasis: {
                        areaColor: '#2a333d'
                    }
                }
            },
            series: [{
                name: '地址',
                type: 'scatter',
                data: chartData,
                coordinateSystem: 'geo',
                symbolSize: function(val) {
                    return 10;
                }
            }]
        }
        myChart.setOption(option)
    }
</script>

</html>